<template>
  <div>
    <div style="margin: 20px">
      <Time v-on:success="success" id="Time" />
      <span class="topPadding">车站：</span>
      <el-autocomplete
        class="inline-input"
        clearable
        v-model="params.qczmc"
        :fetch-suggestions="StationQuerySearch"
        placeholder="请输入内容（可选）"
        :trigger-on-focus="false"
      ></el-autocomplete>
      <el-button
        class="topPadding"
        type="primary"
        icon="el-icon-search"
        size="mini"
        @click="handleQuery"
        >查询</el-button
      >
    </div>
    <!-- 第一模块 -->
    <div>
      <order-header :headerData="selectDay" :typeStyle="1"></order-header>
    </div>
    <div class="salesBg"></div>
    <div>
      <order-content
        :selectData1="selectData1"
        :selectData2="selectData2"
        :dateType="dateType"
      ></order-content>
    </div>
    <div class="salesBg"></div>
    <!-- 第三模块 -->
    <div>
      <order-content2 :echart1="echart1" :echart2="echart2"></order-content2>
    </div>
    <div class="salesBg"></div>
    <!-- 第四模块 -->
    <div>
      <income-footer
        :selectPopularLines="selectPopularLines"
        :selectPopularStartingStation="selectPopularStartingStation"
        :selectPopularDestinations="selectPopularDestinations"
      ></income-footer>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import {
  selectDay,
  selectWeek,
  selectMonth,
  selectYear,
  //   售票渠道统计图部分
  selectDayForTwo,
  selectWeekFowTwo,
  selectMonthForTwo,
  selectYearForTwo,
  //   售票统计 -- 统计图
  selectDataByDayForTicketSal,
  selectDataByDayForRefundNum,
  selectDataByWeekForTicketSal,
  selectDataByWeekForRefundNum,
  //   退票统计 -- 统计图
  selectDataByMonthForTicketSal,
  selectDataByMonthForRefundNum,
  selectDataByYearForTicketSal,
  selectDataByYearForRefundNum,
  //   退票渠道统计
  refundChannelsForDay,
  refundChannelsForWeek,
  refundChannelsForMonth,
  refundChannelsForYear,
  //   热门线路
  selectPopularLinesForDay,
  selectPopularLinesForWeek,
  selectPopularLinesForMonth,
  selectPopularLinesForYear,
  //   热门出发站
  selectPopularStartingStationForDay,
  selectPopularStartingStationForWeek,
  selectPopularStartingStationForMonth,
  selectPopularStartingStationForYear,
  //   热门抵达地
  selectPopularDestinationsForDay,
  selectPopularDestinationsForWeek,
  selectPopularDestinationsForMonth,
  selectPopularDestinationsForYear,
} from "@/api/statistics/income";
import { querystations } from "@/api/order/refundList";
import Time from "../model/time";
import utils from "../../js/index";
import orderHeader from "../model/orderHeader";
import orderContent from "../model/incomeContent";
import orderContent2 from "../model/incomeContent2";
import incomeFooter from "../model/incomeFooter";

export default {
  name: "Income",
  components: {
    Time,
    orderHeader,
    orderContent,
    orderContent2,
    incomeFooter
  },
  data() {
    return {
      // 头部数据
      selectDay: [],
      //  第三层内容：饼状图
      echart1: [],
      echart2: [],
      //   柱状图数据
      selectData1: [],
      selectData2: [],
      //   热门线路
      selectPopularLines: [],
      //   热门出发站
      selectPopularStartingStation: [],
      //   热门抵达地
      selectPopularDestinations: [],
      echartData1: [],
      headerShow: false,
      params: {
        time: utils.utils.NewDateYear(
          new Date().setDate(new Date().getDate() - 1)
        ),
        qczmc: "",
      },
      dateType: "天",
    };
  },
  mounted() {
    this.DaySet();
    this.getStationList();
  },
  methods: {
    handleQuery() {
      switch (this.dateType) {
        case "天":
          this.DaySet();
          break;
        case "周":
          this.WeekSet();
          break;
        case "月":
          this.MonthSet();
          break;
        case "年":
          this.YearSet();
          break;
        default:
          break;
      }
    },
    StationQuerySearch(queryString, cb) {
      var restaurantsStation = this.stationList;
      var results = queryString
        ? restaurantsStation.filter(this.StationCreateFilter(queryString))
        : restaurantsStation;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    StationCreateFilter(queryString) {
      return (v) => {
        return v.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      };
    },
    getStationList() {
      querystations().then((res) => {
        if (res.code == 200) {
          var arr = [];
          res.data.forEach((item) => {
            arr.push({ value: item.stationName });
          });
          this.stationList = arr;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //   第一模块 ======== 天
    getSelectDay() {
      selectDay(this.params).then((res) => {
        if (res.msg) {
          this.$message.error(res.msg);
        }
        this.headerShow = true;
        this.selectDay = res;
      });
    },
    //   周
    getSelectWeek() {
      selectWeek(this.params).then((res) => {
        if (res.msg) {
          this.$message.error(res.msg);
        }
        this.headerShow = true;
        this.selectDay = res;
      });
    },
    //   月
    getSelectMonth() {
      selectMonth(this.params).then((res) => {
        if (res.msg) {
          this.$message.error(res.msg);
        }
        this.headerShow = true;
        this.selectDay = res;
      });
    },
    //   年
    getSelectYear() {
      selectYear(this.params).then((res) => {
        if (res.msg) {
          this.$message.error(res.msg);
        }
        this.headerShow = true;
        this.selectDay = res;
      });
    },

    // 第二模块 ========== 天
    getSelectDayForTwo() {
      selectDayForTwo(this.params).then((res) => {
        this.echart1 = res;
      });
    },
    // 周
    getSelectWeekFowTwo() {
      selectWeekFowTwo(this.params).then((res) => {
        this.echart1 = res;
      });
    },
    // 月
    getSelectMonthForTwo() {
      selectMonthForTwo(this.params).then((res) => {
        this.echart1 = res;
      });
    },
    // 年
    getSelectYearForTwo() {
      selectYearForTwo(this.params).then((res) => {
        this.echart1 = res;
      });
    },

    //   第三模块 ======== 天
    refundSelectDay() {
      refundChannelsForDay(this.params).then((res) => {
        if (res.msg) {
          this.$message.error(res.msg);
        }
        this.echart2 = res;
      });
    },
    //   周
    refundSelectWeek() {
      refundChannelsForWeek(this.params).then((res) => {
        if (res.msg) {
          this.$message.error(res.msg);
        }
        this.echart2 = res;
      });
    },
    //   月
    refundSelectMonth() {
      refundChannelsForMonth(this.params).then((res) => {
        if (res.msg) {
          this.$message.error(res.msg);
        }
        this.echart2 = res;
      });
    },
    //   年
    refundSelectYear() {
      refundChannelsForYear(this.params).then((res) => {
        if (res.msg) {
          this.$message.error(res.msg);
        }
        this.echart2 = res;
      });
    },
    // 热门线路 ========== 天
    selectPopularLinesForDayList() {
      selectPopularLinesForDay(this.params).then((res) => {
        this.selectPopularLines = res;
      });
    },
    // 周
    selectPopularLinesForWeekList() {
      selectPopularLinesForWeek(this.params).then((res) => {
        this.selectPopularLines = res;
      });
    },
    // 月
    selectPopularLinesForMonthList() {
      selectPopularLinesForMonth(this.params).then((res) => {
        this.selectPopularLines = res;
      });
    },
    // 年
    selectPopularLinesForYearList() {
      selectPopularLinesForYear(this.params).then((res) => {
        this.selectPopularLines = res;
      });
    },
    // 热门出发站 ========== 天
    selectPopularStartingStationForDayList() {
      selectPopularStartingStationForDay(this.params).then((res) => {
        this.selectPopularStartingStation = res;
      });
    },
    // 周
    selectPopularStartingStationForWeekList() {
      selectPopularStartingStationForWeek(this.params).then((res) => {
        this.selectPopularStartingStation = res;
      });
    },
    // 月
    selectPopularStartingStationForMonthList() {
      selectPopularStartingStationForMonth(this.params).then((res) => {
        this.selectPopularStartingStation = res;
      });
    },
    // 年
    selectPopularStartingStationForYearList() {
      selectPopularStartingStationForYear(this.params).then((res) => {
        this.selectPopularStartingStation = res;
      });
    },
    // 热门抵达地 ========== 天
    selectPopularDestinationsForDayList() {
      selectPopularDestinationsForDay(this.params).then((res) => {
        this.selectPopularDestinations = res;
      });
    },
    // 周
    selectPopularDestinationsForWeekList() {
      selectPopularDestinationsForWeek(this.params).then((res) => {
        this.selectPopularDestinations = res;
      });
    },
    // 月
    selectPopularDestinationsForMonthList() {
      selectPopularDestinationsForMonth(this.params).then((res) => {
        this.selectPopularDestinations = res;
      });
    },
    // 年
    selectPopularDestinationsForYearList() {
      selectPopularDestinationsForYear(this.params).then((res) => {
        this.selectPopularDestinations = res;
      });
    },
    // 售票统计 ========== 天
    selectDataByDayForTicketSalList() {
      selectDataByDayForTicketSal(this.params).then((res) => {
        this.selectData1 = res;
      });
    },
    // 周
    selectDataByWeekForTicketSalList() {
      selectDataByWeekForTicketSal(this.params).then((res) => {
        this.selectData1 = res;
      });
    },
    // 月
    selectDataByMonthForTicketSalList() {
      selectDataByMonthForTicketSal(this.params).then((res) => {
        this.selectData1 = res;
      });
    },
    // 年
    selectDataByYearForTicketSalList() {
      selectDataByYearForTicketSal(this.params).then((res) => {
        this.selectData1 = res;
      });
    },
    // 退票统计 ========== 天
    selectDataByDayForRefundNumList() {
      selectDataByDayForRefundNum(this.params).then((res) => {
        this.selectData2 = res;
      });
    },
    // 周
    selectDataByWeekForRefundNumList() {
      selectDataByWeekForRefundNum(this.params).then((res) => {
        this.selectData2 = res;
      });
    },
    // 月
    selectDataByMonthForRefundNumList() {
      selectDataByMonthForRefundNum(this.params).then((res) => {
        this.selectData2 = res;
      });
    },
    // 年
    selectDataByYearForRefundNumList() {
      selectDataByYearForRefundNum(this.params).then((res) => {
        this.selectData2 = res;
      });
    },
    // 天集合
    DaySet() {
      this.getSelectDay();
      this.getSelectDayForTwo();
      this.refundSelectDay();
      this.selectPopularLinesForDayList();
      this.selectPopularStartingStationForDayList();
      this.selectPopularDestinationsForDayList();
      this.selectDataByDayForTicketSalList();
      this.selectDataByDayForRefundNumList();
    },
    // 周集合
    WeekSet() {
      this.getSelectWeek();
      this.getSelectWeekFowTwo();
      this.refundSelectWeek();
      this.selectPopularLinesForWeekList();
      this.selectPopularStartingStationForWeekList();
      this.selectPopularDestinationsForWeekList();
      this.selectDataByWeekForTicketSalList();
      this.selectDataByWeekForRefundNumList();
    },
    // 月集合
    MonthSet() {
      this.getSelectMonth();
      this.getSelectMonthForTwo();
      this.refundSelectMonth();
      this.selectPopularLinesForMonthList();
      this.selectPopularStartingStationForMonthList();
      this.selectPopularDestinationsForMonthList();
      this.selectDataByMonthForTicketSalList();
      this.selectDataByMonthForRefundNumList();
    },
    // 年集合
    YearSet() {
      this.getSelectYear();
      this.getSelectYearForTwo();
      this.refundSelectYear();
      this.selectPopularLinesForYearList();
      this.selectPopularStartingStationForYearList();
      this.selectPopularDestinationsForYearList();
      this.selectDataByYearForTicketSalList();
      this.selectDataByYearForRefundNumList();
    },

    success(date, type) {
      this.dateType = type;
      switch (type) {
        case "天":
          this.params = { qczmc: this.params.qczmc };
          this.params.time = date;
          break;
        case "周":
          this.params = { qczmc: this.params.qczmc };
          this.params.year = date[0];
          this.params.week = date[1];
          break;
        case "月":
          this.params = { qczmc: this.params.qczmc };
          this.params.year = date[0];
          this.params.month = date[1];
          break;
        case "年":
          this.params = { qczmc: this.params.qczmc };
          this.params.year = date;
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style scoped>
.salesBg {
  height: 12px;
  background: #f0f2f5;
}
#headerInput {
  margin: 20px;
}
.header {
  width: 100%;
}
.imgDiv {
  display: inline-block;
  width: 50px;
  height: 50px;
  position: relative;
  top: 18px;
}
.divImg {
  width: 100%;
  height: 100%;
}
.headerDiv {
  border: 1px solid red;
  padding: 40px;
}
#set2 {
  margin-top: 20px;
}
#Time {
  display: inline-block;
}
.topPadding {
  margin-left: 35px;
}
</style>